{% extends '../common/layout.njk' %}
{% set activeNav = '雪碧图生成工具'%}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="/public/css/css_sprite.min.css">
{% endblock %}
{%block description%}{{super()}}|雪碧图生成工具{%endblock%}
{%block keywords%}
{{super()}},雪碧图
{%endblock%}
{%block title%}
{{super()}}|雪碧图生成工具
{%endblock%}
{% block body %}
<div class="css_sprite app">
    <div class="container-fluid content">
        <main class="main bg-light">
            <div id="layout">
                <div style="margin-bottom: 15px;white-space: nowrap;">
                    <button class="btn btn-primary file-upload-btn">
                        点击上传
                        <input type="file" multiple id="upload" accept="image/*">
                    </button>
                    <button class="btn btn-primary" type="reset" id="reset_upload_btn">清空已上传</button>
                    <div class="btn-group" role="group" id="packer_group">
                        <button type="button" class="btn btn-secondary" data-packer="ordered">顺序排布</button>
                        <button type="button" class="btn btn-secondary active" data-packer="optimized">优化排布</button>
                        <button type="button" class="btn btn-secondary" data-packer="vertical">小图竖排</button>
                        <button type="button" class="btn btn-secondary" data-packer="horizontal">小图横排</button>
                    </div>
                </div>
                <canvas id="canvas" width="800" height="600">
                    你的浏览器不支持canvas，请升级你的浏览器
                </canvas>
            </div>
        </main>
        <aside class="aside-wrapper">
            <div class="bg-light aside">
                <h3>雪碧图生成工具</h3>
                <form id="config_form">
                    <div class="form-group row">
                        <label for="canvas_width" class="col-sm-4 col-form-label">画布宽度：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input type="number" class="form-control" id="canvas_width" min="0" name="canvas_width">
                                <div class="input-group-append">
                                    <div class="input-group-text">px</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="canvas_height" class="col-sm-4 col-form-label">画布高度：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input type="number" class="form-control" id="canvas_height" min="0"
                                       name="canvas_height">
                                <div class="input-group-append">
                                    <div class="input-group-text">px</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="offset-sm-4 col-sm-8">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="auto_height" name="auto_height">自适应高度(自动计算所需最小高度)
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="horizontal_spacing" class="col-sm-4 col-form-label">水平间距：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input type="number" min="0" id="horizontal_spacing" class="form-control"
                                       name="horizontal_spacing">
                                <div class="input-group-append">
                                    <div class="input-group-text">px</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="vertical_spacing" class="col-sm-4 col-form-label">垂直间距：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input type="number" min="0" id="vertical_spacing" class="form-control"
                                       name="vertical_spacing">
                                <div class="input-group-append">
                                    <div class="input-group-text">px</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="form-group row">-->
                    <!--<label for="scaling_ratio" class="col-sm-4 col-form-label">图片缩放：</label>-->
                    <!--<div class="col-sm-8">-->
                    <!--<div class="input-group">-->
                    <!--<input type="number" min="0" step="0.1" id="scaling_ratio" placeholder="1.0" class="form-control" name="scaling_ratio">-->
                    <!--<div class="input-group-addon">x</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <h4>css 模板编辑</h4>
                    <div class="form-group row">
                        <label for="img_path" class="col-sm-4 col-form-label">图片路径：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="img_path" name="img_path">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="css_template" class="col-sm-4 col-form-label">css模板：</label>
                        <div class="col-sm-12">
                            <textarea class="form-control" id="css_template" name="css_template"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <button type="submit" class="btn btn-primary" id="config_form_submit_btn">确定</button>
                            <button class="btn btn-primary" id="download_css_btn">导出css</button>
                            <button class="btn btn-primary" id="download_img_btn">导出图片</button>
                        </div>
                    </div>
                </form>
            </div>
        </aside>
    </div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script type="text/javascript" src="/public/js/css_sprite.min.js"></script>
{% endblock %}